<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../common/mui/mui.css" rel="stylesheet" />
		<link href="../common/css/iconfont.css" rel="stylesheet" />
		<link href="../common/css/yahei.css" rel="stylesheet" />
		<link href="../common/css/app.css" rel="stylesheet" />
		<style>
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item{
				border-bottom: solid 2px transparent;
				height: 36px;
				line-height: 36px;
				margin: 0 var(--size20);
				padding: 0;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom: solid 2px var(--mainColor);
				color: var(--mainColor);
			}
			html,body{
				background-color: var(--bgColor);
			}
			#sliderSegmentedControl{
				background-color: white;
			}
			#slider{
				top: 10px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<!-- <div class="mui-control-item mui-active" data-wid="../TargetPages/clinic/home.html">临床统计</div> -->
						<div class="mui-control-item mui-active" data-wid="../TargetPages/sch/home.html">排班统计</div>
						<!-- <div class="mui-control-item" data-wid="../TargetPages/train/home.html">培训统计</div> -->
						<!-- <div class="mui-control-item" data-wid="../TargetPages/exam/home.html">考核统计</div> -->
						<div class="mui-control-item" data-wid="../TargetPages/rl/home.html">人力统计</div>
						<div class="mui-control-item" data-wid="../TargetPages/zk/home.html">专科统计</div>
						<div class="mui-control-item" data-wid="../TargetPages/ky/home.html">科研统计</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../common/mui/mui.js"></script>
		<script src="../common/js/app.js"></script>
		<script src="../common/js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				//APPMenu 菜单显示与否
				var APPMenu = app.getState().APPMenu
				if (!APPMenu) {
					return
				}
				mui('.noPermission').each(function (domIndex,dom) {
					var code = dom.getAttribute('data-menu')
					if (code && code!="" && APPMenu[code]) {
						dom.classList.remove('noPermission')
					}
				})
				
				var items = []
				mui('#sliderSegmentedControl .mui-control-item').each(function (index,element) {
					if (element.getAttribute('class').indexOf('noPermission') < 0) {
						var url = element.getAttribute('data-wid')
						items.push({id: url,url: url,extras: {}})
					}
				})
				var _self = plus.webview.currentWebview();
				var group = new webviewGroup(_self.id, {
					items: items,
					top:48,
					onChange: function(obj) {
						var c = document.querySelector(".mui-control-item.mui-active");
						if(c) {
							c.classList.remove("mui-active");
						}
						var target = document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")");
						target.classList.add("mui-active");
						if(target.scrollIntoView) {
							target.scrollIntoView();
						}
					}
				});
				mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
					var wid = this.getAttribute("data-wid");
					group.switchTab(wid);
				});
				mui('.mui-scroll-wrapper').scroll({
					bounce: true,
					indicators: false, //是否显示滚动条
				});
				window.addEventListener('listenner', function(e) {
					if (e.detail.dblTap) { 
						//更新当前页面
						var dom = mui('#sliderSegmentedControl .mui-control-item.mui-active')[0]
						var url = dom.getAttribute('data-wid')
						var page = plus.webview.getWebviewById(url);
						if (page) {
							mui.fire(page, 'listenner', {
								dblTap: true
							});
						}
					}
				});
			});
		</script>
	</body>

</html>
